<template>
    <div class="icontent">
        <div class="talk_con2">
            <!-- 显示区域 -->
            <div class="talk_show" id="words">
                <!-- 根据vue对象中的数组，遍历出对应的标签。 -->
                <div v-for="i in arr" :class="i.person=='A'?'atalk':'btalk'">
                    <span>
                        <template v-if="i.person == 'A'">{{ i.person }}说：</template>
                        {{ i.words }}
                        <template v-if="i.person == 'B'">:说{{ i.person }}</template>
                    </span>
                </div>
            </div>
            <!-- 发送内容区域 -->
            <div class="talk_input">
                <!-- 选项: 带有selected的选项,的value值和select标签共享 -->
                <select class="whotalk" id="who" v-model='str1'>
                    <option value="0">A说：</option>
                    <option value="1">B说：</option>
                </select>
                <!-- 请输入内容 -->
                <input type="text" class="talk_word" id="talkwords" v-model='str2'>
                <!-- 按钮 -->
                <input type="button" value="发送" class="talk_sub" id="talksub" @click="add_data()">
            </div>
        </div>
    </div>
</template>

<script>
    import { login, getInfo } from '@/api/login'
    import store from '@/store'
    import Vue from 'vue'
    import $ from 'jquery'
    export default {
        name: "copy_chat",
        data () {
            return {
                arr:[
                    {person: 'B', words: '吃饭了吗？'},
                    {person: 'A', words: '还没呢，你呢？'},
                ],
                str2:'',
                str1: '0'
            }
        },
        methods: {
            add_data: function(){
                // bug: 内容不能为空。
                if(this.str2 == ''){
                    alert('请输入内容...')
                    return;
                }
                var p = this.str1=="0"?"A":"B";
                var obj = {person: p, words: this.str2}
                this.arr.push(obj)

                // 添加完内容，清空
                this.str2 = ''
            },
            scrollToBottom() {
                this.$nextTick(() => {
                    var container = this.$el.querySelector("#words");
                    container.scrollTop = container.scrollHeight;
                })
            }
        },
        mounted () {
            this.scrollToBottom();
        },
        updated:function(){
            this.scrollToBottom();
        },
        created: function() {
        }
    }
</script>

<style scoped>
    .talk_con1{
        width:600px;
        height:500px;
        border:1px solid #666;
        margin: 30px;
        float: left;
        background:#e98080;
    }

    .talk_con2{
        width:600px;
        height:500px;
        border:1px solid #666;
        margin: 30px;
        float: right;
        background:#7adbd3;
    }
    .talk_show{
        width:580px;
        height:420px;
        border:1px solid #666;
        background:#fff;
        margin:10px auto 0;
        overflow-y: scroll;
    }
    .talk_show::-webkit-scrollbar {
        display: none;
    }
    .talk_input{
        width:580px;
        margin:10px auto 0;
    }
    .whotalk{
        width:80px;
        height:30px;
        float:left;
        outline:none;
    }
    .talk_word{
        width:420px;
        height:26px;
        padding:0px;
        float:left;
        margin-left:10px;
        outline:none;
        text-indent:10px;
    }        
    .talk_sub{
        width:56px;
        height:30px;
        float:left;
        margin-left:10px;
    }
    .atalk{
       margin:10px; 
    }
    .atalk span{
        display:inline-block;
        background:#0181cc;
        border-radius:10px;
        color:#fff;
        padding:5px 10px;
    }
    .btalk{
        margin:10px;
        text-align:right;
    }
    .btalk span{
        display:inline-block;
        background:#ef8201;
        border-radius:10px;
        color:#fff;
        padding:5px 10px;
    }
</style>